<!--<template>-->
<!--  <div class="dashboard-wrapper">-->
<!--    &lt;!&ndash; 顶部控制栏 &ndash;&gt;-->
<!--    <div class="dashboard-controls">-->
<!--      <h1>数据可视化大屏平台</h1>-->

<!--      &lt;!&ndash; Tab切换 &ndash;&gt;-->
<!--      <div class="tab-container">-->
<!--        <button-->
<!--          v-for="(tab, index) in tabs"-->
<!--          :key="index"-->
<!--          :class="{ 'tab-button': true, active: activeTab === index }"-->
<!--          @click="switchTab(index)"-->
<!--        >-->
<!--          {{ tab }}-->
<!--        </button>-->
<!--      </div>-->

<!--      &lt;!&ndash; 全屏按钮 &ndash;&gt;-->
<!--      <button class="fullscreen-btn" @click="toggleFullScreen">-->
<!--        <i class="fullscreen-icon">{{ isFullScreen ? '↩' : '⛶' }}</i>-->
<!--        {{ isFullScreen ? '退出全屏' : '全屏显示' }}-->
<!--      </button>-->
<!--    </div>-->

<!--    &lt;!&ndash; 内容区域 - 根据选中的Tab显示不同布局 &ndash;&gt;-->
<!--    <div class="dashboard-content">-->
<!--      <Layout1 v-if="activeTab === 0" />-->
<!--      <Layout2 v-if="activeTab === 1" />-->
<!--      <Layout3 v-if="activeTab === 2" />-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--  import { ref, onMounted } from 'vue'-->
<!--  import Layout1 from './component/Layout1.vue'-->
<!--  import Layout2 from './component/Layout2.vue'-->
<!--  import Layout3 from './component/Layout3.vue'-->

<!--  // Tab切换相关-->
<!--  const tabs = ['主从式布局', '网格式布局', '上下分区布局']-->
<!--  const activeTab = ref(0)-->
<!--  const isFullScreen = ref(false)-->

<!--  // Tab切换-->
<!--  const switchTab = (index) => {-->
<!--    activeTab.value = index-->
<!--  }-->

<!--  // 全屏切换功能-->
<!--  const toggleFullScreen = () => {-->
<!--    if (!document.fullscreenElement) {-->
<!--      document.documentElement.requestFullscreen().catch((err) => {-->
<!--        console.error(`全屏请求错误: ${err.message}`)-->
<!--      })-->
<!--      isFullScreen.value = true-->
<!--    } else {-->
<!--      if (document.exitFullscreen) {-->
<!--        document.exitFullscreen()-->
<!--        isFullScreen.value = false-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  // 监听全屏状态变化-->
<!--  const handleFullScreenChange = () => {-->
<!--    isFullScreen.value = !!document.fullscreenElement-->
<!--  }-->

<!--  onMounted(() => {-->
<!--    // 监听全屏事件-->
<!--    document.addEventListener('fullscreenchange', handleFullScreenChange)-->
<!--  })-->

<!--  // 组件卸载前清理-->
<!--  onUnmounted(() => {-->
<!--    document.removeEventListener('fullscreenchange', handleFullScreenChange)-->
<!--  })-->
<!--</script>-->

<!--<style scoped>-->
<!--  /* 基础样式 */-->
<!--  .dashboard-wrapper {-->
<!--    width: 100%;-->
<!--    min-height: 100vh;-->
<!--    background-color: #0f172a;-->
<!--    color: #fff;-->
<!--    overflow: hidden;-->
<!--    font-family: 'Segoe UI', Roboto, sans-serif;-->
<!--  }-->

<!--  /* 顶部控制栏 */-->
<!--  .dashboard-controls {-->
<!--    display: flex;-->
<!--    justify-content: space-between;-->
<!--    align-items: center;-->
<!--    padding: 1rem 2rem;-->
<!--    background-color: #1e293b;-->
<!--    border-bottom: 1px solid #334155;-->
<!--    z-index: 10;-->
<!--    position: relative;-->
<!--  }-->

<!--  .dashboard-controls h1 {-->
<!--    margin: 0;-->
<!--    color: #36cbcb;-->
<!--    font-size: 1.5rem;-->
<!--  }-->

<!--  /* Tab切换样式 */-->
<!--  .tab-container {-->
<!--    display: flex;-->
<!--    gap: 0.5rem;-->
<!--  }-->

<!--  .tab-button {-->
<!--    background-color: #334155;-->
<!--    color: #fff;-->
<!--    border: none;-->
<!--    padding: 0.5rem 1.5rem;-->
<!--    border-radius: 4px;-->
<!--    cursor: pointer;-->
<!--    transition: all 0.3s ease;-->
<!--    font-size: 1rem;-->
<!--  }-->

<!--  .tab-button.active {-->
<!--    background-color: #36cbcb;-->
<!--    color: #0f172a;-->
<!--    font-weight: bold;-->
<!--  }-->

<!--  .tab-button:hover:not(.active) {-->
<!--    background-color: #475569;-->
<!--  }-->

<!--  /* 全屏按钮 */-->
<!--  .fullscreen-btn {-->
<!--    background-color: #5470c6;-->
<!--    color: #fff;-->
<!--    border: none;-->
<!--    padding: 0.5rem 1rem;-->
<!--    border-radius: 4px;-->
<!--    cursor: pointer;-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--    gap: 0.5rem;-->
<!--    transition: all 0.3s ease;-->
<!--  }-->

<!--  .fullscreen-btn:hover {-->
<!--    background-color: #3b5bdb;-->
<!--  }-->

<!--  .fullscreen-icon {-->
<!--    font-size: 1.2rem;-->
<!--  }-->

<!--  /* 内容区域 */-->
<!--  .dashboard-content {-->
<!--    width: 100%;-->
<!--    height: calc(100vh - 80px);-->
<!--    overflow: hidden;-->
<!--    position: relative;-->
<!--  }-->
<!--</style>-->
<template>
  <div class="mask">
    <div class="billboard_container">
      <!-- <div class="mask"></div> -->
      <div class="back" @click="handleBack">
        <p>返回</p>
      </div>
      <img class="title_img" src="@/assets/imgs/billboard/title.png" alt="title" />
      <div class="content">
        <div class="left_box">
          <systemaStatistics class="systema_statistics" />
          <!-- <projectNumTop class="project_num_top" />
        <enterpriseAnalysis class="enterprise_analysis" /> -->
        </div>
        <div class="center">
          <MapComponent />
          <!-- <total class="total" />

        <projectPercentAnalysie class="project_type" /> -->
        </div>
        <div class="right_box">
          <pieOperat />
          <!-- <districtsCountieNumber class="amount_source" />
        <project_operat_model class="project_operat_model" />
        <builtProjectAmount class="built_project_amount" /> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import systemaStatistics from '@/views/widgets/billboard/component/systemaStatistics.vue'
import MapComponent from '@/components/map/MapComponent.vue'
import pieOperat from './component/pieOperat.vue'

const router = useRouter() // 路由对象

const handleBack = () => {
  router.push({ name: 'Console' })
}
</script>

<style scoped lang="scss">
.mask {
  width: 100%;
  height: 100%;
  background: rgb(3 13 31 / 100%);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 200;
}

.billboard_container {
  position: relative;
  width: 100%;
  height: 100%;
  // background: url('@/assets/imgs/billboard/bg_border.png') no-repeat center center/100% 100%;
  user-select: none;
  .back {
    position: absolute;
    top: 30px;
    right: 50px;
    color: #fff;
    font-weight: 600;
  }
  // .mask {
  //   // position: absolute;
  //   // z-index: -2;
  //   width: 100%;
  //   height: 100%;
  //   background: rgb(3 13 31 / 100%);
  // }

  .title_img {
    position: absolute;
    top: 1%;
    left: 50%;
    width: 157px;
    transform: translate(-50%, 0);
  }

  .content {
    position: absolute;
    top: 8%;
    left: 2%;
    display: flex;
    width: 96%;
    height: 87%;

    .left_box,
    .right_box {
      display: flex;
      width: 25%;
      height: 100%;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    .left_box {
      .systema_statistics {
        width: 100%;
        height: 30%;
      }

      .project_num_top {
        width: 100%;
        height: 40%;
      }

      .enterprise_analysis {
        width: 100%;
        height: 30%;
      }
    }

    .center {
      display: flex;
      width: 50%;
      height: 100%;
      padding: 0 2%;
      box-sizing: border-box;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .total {
        width: 100%;
        height: 10%;
        padding-top: 2%;
        box-sizing: border-box;
      }

      .map {
        width: 100%;
        height: 500px;
      }

      .project_type {
        width: 100%;
        height: 30%;
      }
    }

    .right_box {
      .amount_source {
        width: 100%;
        height: 30%;
      }

      .project_operat_model {
        width: 100%;
        height: 40%;
      }

      .built_project_amount {
        width: 100%;
        height: 30%;
      }
    }
  }
}
</style>
